<template>
  <div>
    <div class="filter-container hs-bg-card hs-panel">
      <el-input @keyup.enter.native="handleFilter" style="width: 200px" class="filter-item"
                v-model="listQuery.name"></el-input>
      <el-button class="filter-item" type="primary" icon="search" @click="handleFilter">搜索</el-button>
      <el-button class="filter-item"
                 v-permission="'dept:add'"
                 style="float:right" @click="handleAdd"
                 type="primary" icon="el-icon-plus" circle>
      </el-button>
      <el-button style="float:right" type="success" icon="el-icon-download" v-permission="'dept:export'"
                 circle @click="handleDownload()">
      </el-button>
    </div>
    <div class="hs-panel hs-bg-card mt-2">
      <el-table :data="tableData"
                border
                style="margin: 10px 0;">
        <el-table-column type="index" width="50" label="序号">
        </el-table-column>
        <el-table-column   label="名称">
          <template slot-scope="scope">
            <div v-bind:class="'column_level_' + scope.row.level">
              <el-button type="text" v-if="scope.row.children"
                         @click="handleToggle(scope.row)">
                <i v-if="scope.row._expanded" class="el-icon-caret-bottom" aria-hidden="true"></i>
                <i v-else class="el-icon-caret-right" aria-hidden="true"></i>
                <span>{{scope.row.name}} </span>
              </el-button>
              <span v-else style="margin-left:20px"> {{scope.row.name}} </span>
            </div>
          </template>
        </el-table-column>

        <el-table-column width="160" label="最后更新" prop="updatedAt">
        </el-table-column>

        <el-table-column label="操作" width="160" >
          <template slot-scope="scope">

            <el-button v-permission="'dept:update'" size="small" type="success" icon="el-icon-edit" circle
                       @click="handleUpdate(scope.row)">
            </el-button>
            <el-button v-permission="'dept:delete'" size="small" type="danger" icon="el-icon-delete" circle
                       @click="handleDelete(scope.row)">
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-dialog :title="textMap[editDialog.type]" :visible.sync="editDialog.show">
      <el-form :model="formData" ref="form" :rules="rules" label-width="100px">
        <el-form-item label="名称" prop="name">
          <el-input v-model="formData.name" placeholder="请输入名称"></el-input>
        </el-form-item>
        <el-form-item label="上级部门" prop="uri">
          <el-tree
            ref="tree"
            :data="treeData"
            node-key="id"
            show-checkbox
            check-strictly
            @check-change="handleCheckChange">
          </el-tree>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click.native="editDialog.show = false">取 消</el-button>
        <el-button type="primary" @click="handleSubmit()">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>

import { treeList, delObj, fetchTree, addObj, putObj } from 'api/admin/department'

export default {
  name: 'group',
  components: {
  },
  data () {
    return {
      listQuery: {},
      tabMapOptions: [],
      selectOption: undefined,
      activeName: 'dept',
      tableData: undefined,
      originTaleData: [],
      treeData: [],
      textMap: {
        update: '编辑部门',
        create: '新增部门'
      },
      editDialog: {
        type: undefined,
        show: false
      },
      rules: {
        name: [
          { required: true, message: '请输入部门名称', trigger: 'blur' },
          { min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur' }
        ]
      },
      authDialog: {
        show: false
      },
      formData: {
        id: 0,
        parentId: 0,
        name: undefined
      },
      changed: true
    }
  },
  created () {
    this.getList()
  },
  methods: {
    handleToggle (row) {
      let id = row.id
      this.filterData(id)
    },
    getList () {
      treeList().then(response => {
        this.originTaleData = response.data
        this.makeData()
      })
    },
    getTreeData () {
      if (!this.changed) {
        return
      }
      this.changed = false
      fetchTree().then(response => {
        this.treeData = response.data
      })
    },
    handleCheckChange (item, checked) {
      if (checked) {
        this.$refs.tree.setCheckedNodes([{
          id: item.id,
          text: item.text
        }])
        this.formData.parentId = item.id
      } else {
        this.formData.parentId = 0
      }
    },
    handleEditComplete () {
      this.editDialog.show = false
      this.getList()
    },
    handleUpdate (row) {
      this.getTreeData()
      this.formData.id = row.id
      this.formData.name = row.name
      this.editDialog.show = true
      this.editDialog.type = 'update'
    },
    handleAdd () {
      this.getTreeData()
      this.formData.id = 0
      this.editDialog.show = true
      this.editDialog.type = 'create'
    },
    handleSubmit () {
      this.$refs.form.validate((valid) => {
        if (valid) {
          if (this.formData.id < 1) {
            addObj(this.formData).then(response => {
              this.complete(response)
            })
          } else {
            putObj(this.formData).then(response => {
              this.complete(response)
            })
          }
        }
      })
    },
    handleDelete (row) {
      this.currentId = row.id
      this.$confirm('该操作将永久删除此角色(' + row.name + '), 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        delObj(this.currentId).then(response => {
          this.complete(response)
        })
      })
    },
    complete (response) {
      let code = parseInt(response.code)
      if (code === 0) {
        this.changed = true
        this.getList()
        this.$message.success('操作成功')
      }
    },
    makeData () {
      let data = []
      let len = this.originTaleData.length
      for (let i = 0; i < len; i++) {
        let item = this.originTaleData[i]
        item._expanded = true
        data.push(item)
      }
      this.tableData = data
    },
    filterData (changed) {
      let show = true
      let level = 1
      let data = []
      let len = this.originTaleData.length
      for (let i = 0; i < len; i++) {
        let item = this.originTaleData[i]
        if (item.id === changed) {
          item._expanded = !item._expanded
        }
        if (show) {
          data.push(item)
          if (item.children) {
            level = item.level
            show = item._expanded
          }
          if (item.level < level) {
            level = item.level
            show = item._expanded
          }
        } else {
          if (item.level <= level) {
            show = item._expanded
            level = item.level
            data.push(item)
          }
        }
      }
      this.tableData = data
    }
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
  .column_level_2 {
    padding-left: 10px;
  }
  .column_level_3 {
    padding-left: 20px;
  }
  .column_level_4 {
    padding-left: 30px;
  }
</style>
